<template>
  <div>
    <div>
      <div class="table-page-search-wrapper">
        <div class="knowledge-search">
          <a-form layout="inline">
            <a-row :gutter="24">
              <template>
                <a-col :md="9" :sm="12" style="float: left;overflow: hidden;">
                  <el-select
                    v-model="value"
                    multiple
                    filterable
                    remote
                    reserve-keyword
                    placeholder="请输入关键词"
                    :remote-method="remoteMethod"
                    :loading="loading"
                    size="small"
                    style="width: 100%"
                  >
                    <el-option v-for="item in options" :key="item.value" :value="item.value"></el-option>
                  </el-select>
                </a-col>
                <a-button type="primary" icon="search" @click="searchOne()">查询</a-button>
              </template>
            </a-row>
          </a-form>
        </div>
        <div class="drug">
          <a-form layout="inline">
            <a-row :gutter="10">
              <template>
                <a-col
                  :md="4"
                  :sm="6"
                  style="float: left;overflow: hidden;"
                  class="drug-classification"
                >药品分类</a-col>
                <a-col
                  :md="12"
                  :sm="12"
                  style="float: left;overflow: hidden;"
                  class="drug-information"
                >药品信息</a-col>
              </template>
            </a-row>
          </a-form>
        </div>
        <div class="drugs">
          <a-form layout="inline">
            <a-row :gutter="10">
              <template>
                <a-col :md="4" :sm="6" style="float: left;" class="drugs-classification">
                  <div>
                    <a-menu
                      mode="inline"
                      :defaultSelectedKeys="['1']"
                    >
                      <a-sub-menu key='sub1' @titleClick="openOneInfo(2)">
                        <span slot="title">
                          <a-icon type="appstore" />
                          <span>中药</span>
                        </span>
                        <a-sub-menu
                          v-for="(key,index) in zyInfoAry"
                          :key="key.id"
                          :title="key.zyName"
                          @titleClick="changeNext(key.id,index,2)"
                        >
                          <a-menu-item
                            @click="changeLast(item1)"
                            :key="item1.id"
                            v-for="(item1,index1) in key.inlinCollasp"
                          >{{ item1.two_type_name }}</a-menu-item>
                        </a-sub-menu>
                      </a-sub-menu>
                      
                      <a-sub-menu key='sub2' @titleClick="openOneInfo(1)">
                        <span slot="title">
                          <a-icon type="appstore" />
                          <span>西药</span>
                        </span>
                        <a-sub-menu
                          v-for="(key,index) in xyInfoAry"
                          :key="key.id"
                          :title="key.xyName"
                          @titleClick="changeNext(key.id,index,1)"
                        >
                          <a-menu-item
                            @click="changeLast(item1)"
                            :key="item1.id"
                            v-for="(item1,index1) in key.inlinCollasp"
                          >{{ item1.two_type_name }}</a-menu-item>
                        </a-sub-menu>
                      </a-sub-menu>
                    </a-menu>
                  </div>
                </a-col>
                <a-col :md="12" :sm="12" class="drugs-information" v-if="insdetail">
                  <div
                    class="drugs-information-line"
                    v-for="(user) in knoIiOwnerAllDetailLast"
                    :key="user"
                  >
                    <li>&nbsp;&nbsp;{{user.drugs_gen_name}}</li>
                    <li>【通用名称】{{user.drugs_pinyin}}</li>
                    <li>【英文名称】{{user.drugs_eng_name}}</li>
                    <li>{{user.drugPro}}</li>
                    <li>{{user.companyName}}</li>
                  </div>
                </a-col>
                <a-col :md="12" :sm="12" class="drugs-information" v-if="!insdetail">
                  <div class="drugs-information-line" v-for="(user) in fuzzySearch" :key="user">
                    <li>&nbsp;&nbsp;{{user.drugs_gen_name}}</li>
                    <li>【通用名称】{{user.drugs_pinyin}}</li>
                    <li>【英文名称】{{user.drugs_eng_name}}</li>
                    <li>{{user.drug_pro}}</li>
                    <li>{{user.companyName}}</li>
                  </div>
                </a-col>
              </template>
            </a-row>
          </a-form>
        </div>
      </div>
      <company-profile />
    </div>
  </div>
</template>

<script>
import { httpAction } from '@/api/manage'
import pick from 'lodash.pick'
import moment from 'moment'
import CompanyProfile from '../../components/knowlage/companyProfile'
import KnowTopnav from '../../components/knowlage/knowtopnav'
import { getAction } from '@/api/manage'
import GlobalLayout from '@/components/page/GlobalLayout'
import Contextmenu from '@/components/menu/Contextmenu'
import { mixin, mixinDevice } from '@/utils/mixin.js'

const indexKey = '/dashboard/analysis'

export default {
  //药品信息页面
  name: 'DrugInformation',
  components: {
    CompanyProfile,
    KnowTopnav,
    GlobalLayout,
    Contextmenu
  },
  data() {
    return {
      rootSubmenuKeys: ['sub1', 'sub4'],
      dataSource: [],
      oneTypeList: [],//一级药品类别 中药  西药 等
      knoIiOwnerAll: [],//药品全部信息 如 一级药品 二级药品 药品详情
      insdetail: true,
      knoIiOwnerAllDetailLast: [],
      firstOneMeun: [],
      options: [],
      value: [],
      list: [],
      zyInfoAry: [],//中药
      xyInfoAry: [],//西药
      medicType: [],
      loading: false,
      fuzzySearch: [],
      states: ['张洪亮'],
      url: {
        list: '/knowledge/knoDrugInfOwner/list',
        listTwo: '/es/searchFull/getSearchSecondLeveList',//通过id查询二级药品
        listDetail: '/knowledge/knoDrugTwoType/queryKnoDrugInfAttByMainId',
        getSearchPublicList: '/es/searchFull/getSearchDrugInfoList',//点击查询
        querySearchList: '/knowledge/knoCgOwner/querySearchList',
        getSearchCheckAndDrugAll: '/es/searchFull/getSearchCheckAndDrugAll'
      },
      rootSubmenuKeys: [],
      openKeys: [],
    }
  },
  mounted() {
    this.list = this.states.map(item => {
      return { value: `${item}`, label: `${item}` }
    })
  },
  created() {
    
  },
  methods: {
    openOneInfo(sign){
      getAction(this.url.getSearchCheckAndDrugAll,{searchType:3,catetoryType: sign}).then(res => {
        if (res.success) {
          if(sign == 1){
            this.xyInfoAry = res.result;
            this.xyInfoAry.forEach((item,index) => {
              item.inlinCollasp = [];
            })
          }else{
            this.zyInfoAry = res.result
            this.zyInfoAry.forEach((item,index) => {
              item.inlinCollasp = [];
            })
          }
        }
        if (res.code === 510) {
          this.$message.warning(res.message)
        }
      })
    },
    searchOne(e) {
      if (this.value.length == 0) {
        getAction(this.url.getSearchPublicList, { searchName: '', searchType: 3 }).then(res => {
          if (res.success) {
            this.fuzzySearch = res.result
          }
          if (res.code === 510) {
            this.$message.warning(res.message)
          }
          this.loading = false
        })
      } else {
        getAction(this.url.getSearchPublicList, { searchName: '"' + this.value[0] + '"', searchType: 3 }).then(res => {
          if (res.success) {
            this.insdetail = false
            this.fuzzySearch = res.result
          }
          if (res.code === 510) {
            this.$message.warning(res.message)
          }
          this.loading = false
        })
      }
    },
    remoteMethod(query) {
      getAction(this.url.querySearchList, { searchType: 3, filed: query }).then(res => {
        if (res.success) {
          let soon = []
          for (var i = 0; i < res.result.length; i++) {
            soon.push(res.result[i].drugsGenName)
          }
          this.states = soon
          this.list = this.states.map(item => {
            return { value: `${item}`, label: `${item}` }
          })
        }
        if (res.code === 510) {
          this.$message.warning(res.message)
        }
        this.loading = false
      })
      if (query !== '') {
        this.loading = true
        setTimeout(() => {
          this.loading = false
          this.options = this.list.filter(item => {
            return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1
          })
        }, 200)
      } else {
        this.options = []
      }
    },
    changeNext(infoId, index, sign) {
      //点击一级信息 展开
      getAction(this.url.listTwo,{searchId: infoId,searchType:3}).then(res => {
        if (res.success) {
          if(sign == 1){//西药
            this.xyInfoAry.forEach((item,index) => {
              if(item.id == infoId){
                item.inlinCollasp = res.result;
              }
            })
          }else{
            this.zyInfoAry.forEach((item,index) => {
              if(item.id == infoId){
                item.inlinCollasp = res.result;
              }
            })
          }
          this.$forceUpdate()
        }
        if (res.code === 510) {
          this.$message.warning(res.message)
        }
      })
    },
    changeLast(item) {
      //点击三级药品  获取详情
      getAction(this.url.listTwo,{searchId: item.id,searchType:5}).then(res => {
        console.log(JSON.stringify(res));
        if (res.success) {
          this.knoIiOwnerAllDetailLast = res.result
          this.insdetail = true
        }
        if (res.code === 510) {
          this.$message.warning(res.message)
        }
      })
    },
    onOpenChange(openKeys) {
      const latestOpenKey = openKeys.find(key => this.openKeys.indexOf(key) === -1)
      if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
        this.openKeys = openKeys
      } else {
        this.openKeys = latestOpenKey ? [latestOpenKey] : []
      }
    }
  }
}
</script>

<style lang="less" scoped>
@import '~@assets/less/common.less';
.table-page-search-wrapper {
  width: 100%;
  background-color: #fff;
  padding-top: 10px;
  margin-left: 10px;
  padding-left: 32px;
  padding-bottom: 30px;

  .drug-classification {
    background-color: #d3f2f4;
    height: 46px;
    font-size: 16px;
    color: #38c3c8;
    text-align: center;
    line-height: 46px;
    margin-left: 4px;
    width: 280px;
  }
  .drug-information {
    background-color: #d3f2f4;
    height: 46px;
    font-size: 16px;
    color: #38c3c8;
    text-align: center;
    line-height: 46px;
    margin-left: 10px;
    width: 910px;
  }
  .drugs-classification {
    height: 620px;
    border: 1px solid #ebeef5;
    margin-left: 4px;
    width: 280px;
    overflow: scroll;

    /deep/ .ant-menu-submenu-title:hover {
      color: #38c3c8;
    }
    /deep/ .ant-menu-submenu-arrow:hover {
      background-image: #38c3c8;
    }
    /deep/ .el-dropdown-menu {
      padding: 0px;
    }
  }
  .drugs-information {
    height: 620px;
    border: 1px solid #ebeef5;
    margin-left: 10px;
    width: 910px;
    overflow: auto;

    .drugs-information-line {
      height: 146px;
      width: 910px;
      margin-left: -5px;
      border-bottom: 1px solid #ebeef5;
      color: #333;
      font-size: 14px;

      li {
        margin-top: 8px;
      }
      li:first-child {
        color: #38c3c8;
        margin-top: 20px;
      }
    }
  }
  .knowledge-top-search {
    margin-left: -40px;

    li {
      font-size: 16px;
      display: inline;
      margin-right: 35px;
      color: #333;
    }
    li:hover {
      color: #38c3c8;
    }
  }
  .knowledge-search {
    margin-top: 30px;
    padding-bottom: 20px;
  }
}
.ant-menu-item-active {
  color: #38c3c8;
}
.ant-menu-item-selected {
  color: #38c3c8;
}
/deep/ .ant-menu-submenu-vertical > .ant-menu-submenu-title:hover .ant-menu-submenu-arrow::after,
.ant-menu-submenu-vertical-left > .ant-menu-submenu-title:hover .ant-menu-submenu-arrow::after,
.ant-menu-submenu-vertical-right > .ant-menu-submenu-title:hover .ant-menu-submenu-arrow::after,
.ant-menu-submenu-inline > .ant-menu-submenu-title:hover .ant-menu-submenu-arrow::after,
.ant-menu-submenu-vertical > .ant-menu-submenu-title:hover .ant-menu-submenu-arrow::before,
.ant-menu-submenu-vertical-left > .ant-menu-submenu-title:hover .ant-menu-submenu-arrow::before,
.ant-menu-submenu-vertical-right > .ant-menu-submenu-title:hover .ant-menu-submenu-arrow::before,
.ant-menu-submenu-inline > .ant-menu-submenu-title:hover .ant-menu-submenu-arrow::before {
  background: linear-gradient(to right, cyan, #2df109);
}
</style>